<script setup lang="ts">
const props = defineProps({
  // 标准 v-model 属性名
  modelValue: {
    type: Boolean,
    default: false,
  },
  payMessage: {
    type: Object,
  },
});
const $emit = defineEmits(['update:modelValue']);
const show = computed({
  get: () => {
    return props.modelValue;
  },
  set: (value) => {
    console.log('props.payMessage', props.payMessage);
    $emit('update:modelValue', value);
  },
});
</script>

<template>
  <van-popup v-model:show="show" position="bottom" :style="{ maxHeight: '70%' }">
    <div class="pay-popup some-popup">
      <div class="pay-text">收款信息</div>
      <div class="pay-icon">
        <svg-icon icon-class="shop" size="1.3em" />
        <span>{{ payMessage?.supplierName }}</span>
      </div>
      <van-field
        class="custom-field"
        label="收款人"
        :model-value="payMessage?.supplierName"
        type="textarea"
        rows="1"
        autosize
        readonly
      />
      <van-field
        class="custom-field"
        label="收款账户"
        :model-value="payMessage?.depositBank"
        type="textarea"
        rows="1"
        autosize
        readonly
      />
      <van-field
        class="custom-field"
        label="收款银行"
        :model-value="payMessage?.bankAccount"
        type="textarea"
        rows="1"
        autosize
        readonly
      />
      <van-button color="#E89000" @click="show = false" round block text="返回" />
    </div>
  </van-popup>
</template>

<style scoped lang="scss">
.some-popup {
  width: 100%;
  background: #ffffff;
  padding: 0 16px;

  .pay-text {
    width: 100%;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    display: flex;
    align-items: center;
  }

  .pay-icon {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;

    span {
      margin-left: 8px;
      font-size: 13px;
      font-weight: 500;
      color: #000000;
    }
  }

  :deep(.van-field__control) {
    color: #222222;
    font-size: 13px;
    font-weight: 400;
  }

  :deep(.van-field__label) {
    color: #787878;
    font-size: 13px;
    font-weight: 400;
  }
}

.pay-popup {
  :deep(.van-button--block) {
    height: 40px;
    margin: 20px 0;
  }
}
</style>
